<template>
	<view class="clock">
		<span>当前时间：{{ dateFormat(newDate) }}</span>
	</view>
</template>
<script>
	export default {
		name: "DateTime",
		data() {
			return {
				newDate: new Date(),
			};
		},
		methods: {
			dateFormat() {
				var date = new Date();
				var hours =
					date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
				var minutes =
					date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
				var seconds =
					date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
				
				return (
				
					hours +
					":" +
					minutes +
					":" +
					seconds
				
				);
			},
		},
		mounted() {
			let that = this;
			this.timer = setInterval(function() {
				that.newDate = new Date().toLocaleString();
			});
		}
	}
</script>

<style>
  .clock {
	            color:rgba(255, 255, 255, 0.7);
	            font-size: 40upx;
	            line-height: 80upx;
	            position: absolute;
	            right: 10px;
	            top: 0;
	        }
</style>
